<template>
  <div>
    <!-- 
      default-expand-all 是默认全部展开
      node-key 是节点的关键字 唯一
    -->
    <el-tree
      :data="data"
      default-expand-all
      node-key="id"
      show-checkbox
    >
      <template #default="{ data }">
        <div class="custom-tree-node">
          <span>{{ data.label }}</span>
        <span>
          <el-button type="primary" link>添加</el-button>
          <el-button type="danger" link>删除</el-button>
        </span>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script setup>
  const data = [
    {
      id: 1,
      label: 'Level one 1',
      children: [
        {
          id: 4,
          label: 'Level two 1-1',
          children: [
            {
              id: 9,
              label: 'Level three 1-1-1',
            },
            {
              id: 10,
              label: 'Level three 1-1-2',
            },
          ],
        },
      ],
    },
    {
      id: 2,
      label: 'Level one 2',
      children: [
        {
          id: 5,
          label: 'Level two 2-1',
        },
        {
          id: 6,
          label: 'Level two 2-2',
        },
      ],
    },
    {
      id: 3,
      label: 'Level one 3',
      children: [
        {
          id: 7,
          label: 'Level two 3-1',
        },
        {
          id: 8,
          label: 'Level two 3-2',
        },
      ],
    },
  ]
</script>

<style scoped>
  .custom-tree-node {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 600px;
		height: 45px;
  }
</style>